<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
    	  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="nwpu-bigdata">
    <title>故障检测与诊断</title>
    
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">

    <link rel="stylesheet" href="assets/js/iCheck/flat/all.css" >
    <link rel="stylesheet" href="assets/js/iCheck/line/all.css" >
    <link rel="stylesheet" href="assets/js/validate/validate.css" >
    <link rel="stylesheet" href="assets/js/idealform/css/jquery.idealforms.css" >
    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css" > 
	<link rel="stylesheet" href="css/custom.css" > 
    <link rel="shortcut icon" href="assets/ico/minus.png">
    
	<link href="css/datepicker3.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
    <style type="text/css">  
		.s1 {  background-color: #cccc;  }  
	</style>
</head>

<body>
	<!-- Preloader -->
	<div id="preloader">
	    <div id="status">&nbsp;</div>
	</div>
	
	<header>
	    <script type="text/javascript" src="common/public/header.js"></script>
	    <!-- /END OF TOP NAVBAR -->
	</header>
	<!-- TOP NAVBAR -->
	
	<section>
	    <!-- SIDE MENU -->
	    <script type="text/javascript" src="common/public/slider.js"></script>
	    <!-- END OF SIDE MENU -->
	</section>

<section>
    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">
            <!-- CONTENT -->
            <!--TITLE -->
            <!--TITLE -->
            <div class="row-fluid">
                <div id="paper-top">
                    <h2 class="tittle-content-header">
                        <span class="entypo-menu"></span>
                        <span class="h3"><strong>规则配置</strong></span>
                    </h2>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <ul id="breadcrumb">
                <li><span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">检测</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">规则检测</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">规则配置</a>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->
            <div class="content-wrap">
                <div class="row-fluid">
                    <div class="nest" id="elementClose">
                        <!-- 条 -->
                        <div class="title-alt">
                            <h6>规则配置</h6>
                            <div class="titleClose">
                                <a class="gone" href="#elementClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#element">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>

                        </div>
                    
                       	<div class="body-nest" id="element">
                            <div class="form_center" style="margin：0 auto; width:80%;">
                            <!-- <button id="test">test</button> -->
                            	
                              <!-- 基础表单 -->
                              <form id="rule_form" role="form" class="form-horizontal" method="post">
                                   <div class="form-group">
                                      <label class="col-sm-3 control-label">规则名称</label>
                                      <div class="col-sm-6">
                                          <input id="ruleName" type="text" class="form-control" name="ruleName">
                                          <span class="help-block">请输入规则名称</span>
                                      </div>
                                   </div>
                                  
                                   <div class="form-group">
                                      <label class="col-sm-3 control-label">主机名称</label>
                                      <div class="col-sm-6">
                                              <select id="hostName" data-toggle="dropdown" class="btn dropdown-toggle" name="hostName">
	                                              <!-- <option>Warning</option>
	                                              <option>Low</option> -->
                                              </select>
                                              <span class="help-block">请输入主机名</span>
                                       </div>
                                   </div> 
                                  
                                   <div class="form-group">
                                       <label class="col-sm-3 control-label">表达式</label>
                                       <!-- <textarea style="width: 50%; height: 100px" id="textarea" placeholder="Enter text ..."></textarea> -->
                                     	&nbsp;&nbsp;&nbsp;
                                      <div class="col-sm-6" id="el">
                                         <textarea id="expressionArea"  onmousedown="return false" placeholder="增加或选择表达式" style="width: 100%; height: 60px" ></textarea>
                                      </div>
                                      <div class="col-sm-3 btn-group">
                                        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#addExpression">增加表达式</button>
                                        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#selectExpression">选择表达式</button>
                                      </div>
                                   </div> 
                                  <!-- 规则配置暂时不用
                                   <div class="form-group">
                                       <label class="col-sm-3 control-label">ASSOCIATION_RULES</label>
                                       &nbsp;&nbsp;&nbsp;
										<div class="col-sm-4" id="el">
										   <textarea id="associationArea" onmousedown="return false" placeholder="Add association rules ..." style="width: 100%; height: 60px"></textarea>
										</div>
										<div class="btn-group">
										   <button id="andBtn" type="button" class="btn btn-warning">&</button>
										   <button id="orBtn" type="button" class="btn btn-danger">|</button>
										   <button id="notBtn" type="button" class="btn btn-info">!</button>
										</div>
                                       	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addAssociate">
                                        <span class="entypo-plus-squared"></span>&nbsp;&nbsp;Add</button>
                                   </div>  -->
                                       
                                   <div class="form-group">
                                      <label class="col-sm-3 control-label">规则描述</label>
                                      <div class="col-sm-6">
                                          <input id="description" maxlength="30"  type="text" class="form-control" name="description">
                                          <span class="help-block">请简要描述规则(少于30字).</span>
                                      </div>
                                   </div>
                                   <div class="form-group">
                                       <label class="col-sm-3 control-label">严重程度</label>
                                       <div class="col-sm-6">
                                              <select id="severe" data-toggle="dropdown" class="btn dropdown-toggle" name="severe">
                                              <option>Warning</option>
                                              <option>Low</option>
                                              <option>High</option>
                                              <option>Higher</option>
                                              <option>Critical</option>
                                              <option>Disastrous</option>
                                              </select>
                                              <span class="help-block">请选择规则的严重程度</span>
                                       </div>
                                    
                                   </div> 
                                   <div class="form-group">
                                        <label class="col-sm-3 control-label">报警方式</label>
                                        <div class="col-sm-9">
                                        <input type="checkbox" name="mediaName" value="WeChat">&nbsp;&nbsp;<span class="status-metro status-warning">微信</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="checkbox" name="mediaName" value="Email">&nbsp;&nbsp;<span class="status-metro status-warning">邮箱</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="checkbox" name="mediaName" value="Telephone">&nbsp;&nbsp;<span class="status-metro status-warning">电话</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        </div> 
                                   </div>
                                   <div class="form-group">
                                        <label class="col-sm-3 control-label">是否启用规则</label>
                                        <div class="col-sm-6">
	                                        <input type="radio" name="isEnable" checked="checked" value="1">&nbsp;&nbsp;<span class="status-metro status-def">是</span>&nbsp;&nbsp;&nbsp;&nbsp;
	                                        <input type="radio" name="isEnable" value="0">&nbsp;&nbsp;<span class="status-metro status-def">否</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        </div> 
                                   </div>
                                     <!-- align="center" -->  
                                   <div  class="form-group" align="center" style="margin:0 auto; width:55%;  ">
	                                    <div class="col-lg-offset-2 col-lg-10" style="margin:0 auto; ">
	                                       <button id="ruleSubmitBtn" class="btn btn-danger" type="submit">Submit</button><!-- type="submit" -->
	                                    </div>
                                   </div> 
                                   
                                   <!-- add模态框 -->
                                   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		                               <div class="modal fade" id="addExpression" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		                                  <div class="modal-dialog">
		                                     <div class="modal-content">
		                                         <div class="modal-header">
		                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		                                            <h4 class="modal-title" id="myModalLabel">增加表达式</h4>
		                                         </div>
		                                         <div class="modal-body">
		                                             <div class="form-group">
			                                            <label class="col-sm-4 control-label">指标</label>
			                                         	<button id="selectMetric" type="button" class="btn btn-info" data-toggle="modal" data-target="#metricModal">Select</button>
			                                            <div class="col-sm-5">
			                                               <input id="metricName" type="text" style=" " class="form-control" name="metricName">
			                                               <span style="width:250px" class="help-block">请输入指标名称</span>
			                                            </div>
		                                             </div>
		                                        
			                                          <div class="form-group">
			                                             <label class="col-sm-4 control-label">函数</label>
			                                             <div class="col-lg-2">
			                                                   <select id="triggerFuncName" data-toggle="dropdown" class="btn dropdown-toggle" name="triggerFuncName">
				                                                   <option>Last</option>
				                                                   <option>Count</option>
				                                                   <option>Avg</option>
				                                                   <option>Min</option>
				                                                   <option>Max</option>
				                                                   <option>Sum</option>
			                                                   </select>
			                                              </div>&nbsp;&nbsp;&nbsp;
		                                              </div>
		                                              <div class="form-group">
		                                              	  <label class="col-sm-4 control-label"></label>
			                                              <div class="col-lg-4">
			                                                   <input id="funcParameter" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" type="text" class="form-control" name="funcParameter">
			                                                   <span class="help-block">请输入数字</span>   
			                                              </div>
			                                              <div class="col-lg-2">
			                                                   <select id="paraUnit" data-toggle="dropdown" class="btn dropdown-toggle" name="paraUnit">
				                                                   <option>Number</option>
				                                                   <option>Minute</option>
				                                                   <option>Hour</option>
				                                                   <option>Day</option>
				                                                   <!-- <option>m</option> -->
			                                                   </select>
			                                              </div>
			                                          </div>
			                                          
				                                      <div class="form-group">
				                                          <label class="col-sm-4 control-label">运算符</label>
				                                           <div class="col-sm-6">
				                                                   <select id="operator" data-toggle="dropdown" class="btn dropdown-toggle" name="operator">
					                                                   
					                                                   <option>&lt</option>
					                                                   <option>></option>
					                                                   <option>=</option>
				                                                   </select>
				                                                    <span class="help-block">请选择运算符</span>
				                                        	</div>
				                                      
				                                       	</div>
				                                       	
				                                        <div class="form-group">
				                                            <label class="col-sm-4 control-label" >触发阈值</label>
				                                            <div class="col-sm-7">
				                                                <input id="triggerThreshold" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" type="text" class="form-control" name="triggerThreshold">
				                                                <span class="help-block">请输入触发规则的阈值</span>
				                                            </div>
				                                        </div>
				                                        
				                                        <div class="form-group">
				                                            <label class="col-sm-4 control-label" >恢复阈值</label>
				                                            <div class="col-sm-7">
				                                                <input id="recoverThreshold" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" type="text" class="form-control" name="recoverThreshold">
				                                                <span class="help-block">请输入恢复规则的阈值</span>
				                                            </div>
				                                        </div>
				                                        <div class="form-group">
				                                            <label class="col-sm-4 control-label" >故障次数</label>
				                                            <div class="col-sm-7">
				                                                <input id="faultTimes" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" type="text" class="form-control" name="faultTimes">
				                                                <span class="help-block">请输入故障次数的警报阈值</span>
				                                            </div>
				                                        </div>
				                                        
				                                        <!--  
		                                                <div class="form-group">
			                                                 <div class="col-lg-offset-2 col-lg-10">
			                                                 <button id="logSubmitBtn" class="btn btn-danger" type="submit">Add</button>
			                                                 </div>
		                                                </div> 
		                                                -->
		                                                   
		                                    	 </div>
		                                    	 
			                                     <div class="modal-footer">
			                                     	<button  type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
			                                        <button id="addConfirm" type="button" class="btn btn-default" data-dismiss="modal">确认</button>
			                                     </div>
		                                     </div><!-- /.modal-content -->
		                                  </div><!-- /.modal-dialog -->
		                               </div></div>
                                   
                              </form>
                                   
                               
                              
                              <!-- select metric模态框 -->  
                               <div class="modal fade" id="metricModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                       <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                         <h4 class="modal-title" id="myModalLabel">Select Metric</h4>
                                       </div>
                                       <div class="modal-body">
                                           <div class="body-nest" id="Footable">
                                               <table id="metric_table"  class="table" data-filtering="true" data-paging="true" data-page-size="5">
                                               <!--table id="metric_table" -->
                                                	<thead>
                                                  		 <tr><th> Metric </th></tr>
                                                    </thead>
                                                    <tbody id="metric_body"></tbody>
                                               </table>
                                           </div>
                                       </div>
	                                   <div class="modal-footer">
	                                      <button  type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
	                                      <button id="metricConfirm" type="button" class="btn btn-default" data-dismiss="modal">Confirm</button>
	                                   </div>
                              		</div><!-- /.modal-content -->
                        		  </div><!-- /.modal-dialog -->
                      		   </div> 
                      		   
                              <!-- selectExpression选择表达式模态框 -->  
                               <div class="modal fade" id="selectExpression" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                          <h4 class="modal-title" id="myModalLabel">选择表达式</h4>
                                      </div>
                                      <div class="modal-body">
                                         <div class="body-nest" id="Footable">
                                            <table  id="expression_table" class="table" data-filtering="true" data-paging="true" data-page-size="5">
                                             	<thead>
                                                	<tr><th> 表达式 </th></tr>
                                                 </thead>
                                                 <tbody id="expression_body"></tbody>
                                            </table>
                                         </div>
                                      </div>
	                                  <div class="modal-footer">
	                                     <button  type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
	                                     <button id="expressionConfirm" type="button" class="btn btn-default" data-dismiss="modal">确认</button>
	                                  </div>
                                    </div><!-- /.modal-content -->
                                  </div><!-- /.modal-dialog -->
                      			</div> 
		                      
		                      <!--  selectRule选择关联规则    暂时取消-->   
		                       <!-- <div class="modal fade" id="addAssociate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                         <h4 class="modal-title" id="myModalLabel">SELECT RULE</h4>
                                      </div>
                                      <div class="modal-body">
                                         <div class="body-nest" id="Footable">
                                            <table  id="select_rule" class="table" data-filtering="true" data-paging="true">
                                             <thead>
                                                <tr>
                                                <th>
                                                 RULE NAME
                                                </th>
                                                <th>
                                                 EXPRESSION
                                                </th>
                                                <th>
                                                 DESCRIPTION
                                                </th>
                                                 </tr>
                                                 </thead>
                                                 <tbody></tbody>
                                            </table>
                                         </div>
                                      </div>
		                              <div class="modal-footer">
		                                   <button  class="btn btn-danger" type="button" data-dismiss="modal">CLose</button>
		                                   <button  id="ruleConfirm" class="btn btn-default" type="button" data-dismiss="modal">Confirm</button>
		                              </div>
                                    </div>/.modal-content
                        		  </div>/.modal-dialog
                      		    </div>   -->           
                                  
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<footer>
    <div class="container-fluid">
        <div id="footer">
           
        </div>
    </div>
</footer>
<!--  END OF PAPER WRAP -->
    
    <!-- Le styles -->
	<script type="text/javascript" src="assets/js/jquery.js"></script>
	<script type="text/javascript" src="assets/js/jquery.min.js"></script>
	
    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>  
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>

    <!-- /MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/iCheck/jquery.icheck.js"></script>
    <script type="text/javascript" src="assets/js/switch/bootstrap-switch.js"></script>
    
    <!--表格相关的js  -->
    <script src="plugins/footable/3.1.6/footable.min.js"></script>
	<script src="plugins/footable/3.1.6/footable.js"></script>
	<!-- 表单相关的js -->
	<script type="text/javascript" src="common/rule/ruleConfiguration.js"></script>
	<script type="text/javascript" src="common/rule/ruleConfigShow.js"></script>
	<script type="text/javascript" src="common/rule/ruleShow.js"></script>  
	
</body>

</html>
